<template>
	<view class="content">
		<form v-if="!gp_id" @submit="submitMember">
			<view class="list">
				<view class="list-title">成员信息</view>
				<view class="list-item">姓名： <input name="person_name" placeholder="请输入姓名" /></view>
				<view class="list-item">身份证号：<input name="person_identity" placeholder="请输入身份证号" /></view>

				<button style="width: 100%;" form-type="submit">下一步</button>
			</view>

			<!-- <view class="list">
				<button style="width: 100%;" form-type="submit">下一步</button>
			</view> -->
		</form>

		<view v-else>
			<view class="list">
				<!-- <view class="list-title">填写报备</view> -->
				<view class="list-item">
					{{gp_info}}
				</view>
			</view>

			<view class="list">
				<view class="list-title">填写报备</view>
				<!-- json schema -->
				<json-editor v-if="Object.keys(schema).length" ref="JsonEditor" :schema="schema" v-model="model">
					<el-button @click="submitReport">提交报备</el-button>
					<el-button @click="resetReport">重置填写</el-button>
				</json-editor>
			</view>
		</view>
	</view>
</template>

<script>
	import JsonEditor from 'vue-json-ui-editor';
	import JsonSchema from "@/common/json-schema/json-schema.vue";

	export default {
		components: { JsonEditor },
		data() {
			return {
				report_id: "",

				gp_id: "", // 团体成员ID
				gp_info: "",

				schema: {},
				model: {},
			}
		},
		onLoad() {
		},
		created() {
			this.report_id = this.$route.query.report_id;

			if ( !this.report_id ) {
				this.gp_id = uni.getStorageSync("gp_id");

				if ( this.gp_id ) {
					if (!this.checkMember1()) {
						this.gp_id = "";
					}
				}
			}
		},
		methods: {
			checkMember1() {
				let status = false;
				uniCloud.callFunction({
					name: "ha_check_member1",
					data: {
						report_id: this.report_id,
						gp_id: this.gp_id
					},
					success: ({result}) => {
						// console.log(result)

						if ( result.status === 0 ) {
							this.gp_info = result.data.gp_info;
							this.schema = result.data.schema;
							status = true;
						} else {
							uni.showToast({
								icon: 'none',
								title: `${result.msg || "网络异常，请稍后重试！"}`,
								duration: 1000
							});
						}
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
				return status;
			},
			submitMember: function(e) {
				console.log(e.detail.value);

				if (!e.detail.value.person_name) {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none'
					})
					return
				}
				if (!e.detail.value.person_identity) {
					uni.showToast({
						title: '身份证号不能为空',
						icon: 'none'
					})
					return
				}

				if ( !this.report_id ) {
					uni.showToast({
						title: '出错了！',
						icon: 'none'
					})
					return
				}

				uniCloud.callFunction({
					name: "ha_check_member2",
					data: Object.assign(e.detail.value, {
						report_id: this.report_id,
					}),
					success: ({result}) => {
						// console.log(result);

						if ( result.status === 0 ) {
							this.gp_id = result.data.gp_id;
							uni.setStorageSync("gp_id",this.gp_id);

							this.gp_info = result.data.gp_info;
							this.schema = result.data.schema;

							// location.reload();
						} else {
							uni.showToast({
								icon: 'none',
								title: `${result.msg || "网络异常，请稍后重试！"}`,
								duration: 1000
							});
						}
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			},
			submitReport: function(_e) {
				// console.log(_e);
				this.$refs.JsonEditor.form().validate(valid => {
					if (valid) {
						// this.model contains the valid data according your JSON Schema.
						// You can submit your model to the server here

						uniCloud.callFunction({
							name: "ha_add_record",
							data: {
								report_id: this.report_id,
								gp_id: this.gp_id,
								model: this.model
							},
							success: ({result}) => {
								// console.log(result);

								if ( result.status === 0 ) {
									uni.showToast({
										title: `${result.msg || "提交成功！"}`,
										duration: 1000
									});
									location.reload();
								} else {
									uni.showToast({
										icon: 'none',
										title: `${result.msg || "网络异常，请稍后重试！"}`,
										duration: 1000
									});
								}
							},
							fail() {
								uni.showToast({
									icon: 'none',
									title: '网络异常，请稍后重试！'
								});
							}
						});

						// eslint-disable-next-line no-console
						// console.log('model', JSON.stringify(this.model));
						this.$refs.JsonEditor.clearErrorMessage();
					} else {
						this.$refs.JsonEditor.setErrorMessage('Please fill out the required fields');
						return false;
					}
				});
			},
			resetReport: function() {
				this.$refs.JsonEditor.reset();
			}
		}
	}
</script>

<style>
	page {
		background: #f0f0f0;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 50upx;
	}

	.list {
		display: flex;
		flex-direction: column;
		width: 680upx;
		margin: auto;
		margin-top: 20upx;
		background: #ffffff;
		border-radius: 20upx;
		padding-bottom: 20upx;
	}

	.list-title {
		width: 580upx;
		padding: 20upx;
		display: flex;
		font-size: 40upx;
		font-weight: bold;
		border-bottom: #f0f0f0 1upx solid;
		margin: auto;
		margin-bottom: 20upx;

	}

	.list-item {
		width: 580upx;
		padding: 20upx;
		display: flex;
		margin: auto;
		font-size: 30upx;
		align-items: center;
	}

	.list-item input {
		background: #f0f0f0;
		border-radius: 10upx;
		padding-left: 20upx;
		padding-right: 20upx;
		width: 300upx;
		height: 60upx;
		color: #999999;
		font-size: 30upx;

	}

	.xiala {
		display: flex;
		background: #f0f0f0;
		padding: 10upx;
		border-radius: 10upx;
		color: #999999;
		font-size: 30upx;

	}

	.xiala image {
		display: flex;
		padding-top: 5upx;
		width: 30upx;
		height: 30upx;
		margin-left: 10upx;

	}
</style>
